<template>
  <view class="sticky-buttons">
    <view class="item-button" @click="goSource">
      <image class="item-icon" src="https://images-cloud.qboson.com/community/portal/202502/06/143727y8hfstf8s8ftvtus.png" />
    </view>
    <up-badge v-if="showBadge" :absolute="true" :offset="[4, 4]" :isDot="true" type="error"></up-badge>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useUserStore } from '@/stores'
const userStore = useUserStore()

const showBadge = ref(userStore.channelStatus)
watch(() => userStore.channelStatus, (newVal) => {
  showBadge.value = newVal
},{ immediate: true, deep: true })

const goSource = () => {
  userStore.setChannelStatus(false)
  uni.navigateTo({
    url:`/pagesA/source/index`
  })
}
</script>

<style scoped lang="scss">
.sticky-buttons {
  position: fixed;
  right: 12px;
  bottom: 20px;
  .item-button {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    opacity: 1;
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .item-icon {
      width: 50%;
      height: 50%;
      margin-left: 3px;
    }
  }
}
</style>
